<template>
  <div class="hunter-work-bench-block" >
    <ep-date-range class="hunter-intro-data-range" v-model="hunterDateRange" :clearable="false" size="small" @change="handleGetMonitor" />
    <ep-row :gutter="10" style="background-color: white; padding-top: 10px;">
      <ep-col :col="10">
        <div class="schema-tab" >
          <!--          <div class="hunter-intro-title">-->
          <!--            <span style="padding-left: 15px">猎户数据监控</span>-->
          <!--            <ep-tooltip class="item" effect="light" style="margin-bottom: 5px"-->
          <!--                        content="点击Schema可查看SQL配置" placement="right">-->
          <!--              <ep-button type="text" icon="help-circled" style="color: #546E7A"></ep-button>-->
          <!--            </ep-tooltip>-->

          <!--          </div>-->
          <ul class="hunter-intro-block">
            <li class="hunter-intro-item">
              <div class="hunter-intro-item-title">审核未通过数量</div>
              <div class="hunter-intro-item-label word-one-line">{{ machineInfo.notPassCount || 0 }} 个</div>
            </li>
            <li class="hunter-intro-item">
              <div class="hunter-intro-item-title">提交/回滚/错误数</div>
              <div class="hunter-intro-item-label word-one-line">
                {{ machineInfo.extSuccCount || 0 }} 个 / {{ machineInfo.extRollbackCount || 0 }} 个 / {{ machineInfo.extErrCount || 0 }} 个
              </div>
            </li>
            <li class="hunter-intro-item">
              <div class="hunter-intro-item-title">SCHEMA总数</div>
              <div class="hunter-intro-item-label word-one-line">{{ schemaListLength || 0 }} 个</div>
            </li>
            <li class="hunter-intro-item-tab">
              <ep-tabs v-model="activeSchemaTab" position="middle">
                <ep-tab-item name="oracle" label="Oracle">
                  <template v-if="schemaList.oracle.length > 0">
                    <ep-tag
                      v-for="(item, index) in schemaList.oracle"
                      :key="index"
                      style="margin: 0 3px; cursor: pointer"
                      :type="schemaSearchList.indexOf(item) === -1 ? 'primary' : 'gary'"
                      @click.native="addToSearchList(item)"
                      >{{ showSchemaLabel(item) }}
                    </ep-tag>
                  </template>
                  <span v-else class="hunter-intro-item-tab-none">暂无数据</span>
                </ep-tab-item>
                <ep-tab-item name="mysql" label="MySQL">
                  <template v-if="schemaList.mysql.length > 0">
                    <ep-tag
                      v-for="(item, index) in schemaList.mysql"
                      :key="index"
                      style="margin: 0 3px; cursor: pointer"
                      :type="schemaSearchList.indexOf(item) === -1 ? 'primary' : 'gary'"
                      @click.native="addToSearchList(item)"
                      >{{ showSchemaLabel(item) }}
                    </ep-tag>
                  </template>
                  <span v-else class="hunter-intro-item-tab-none">暂无数据</span>
                </ep-tab-item>
                <ep-tab-item name="mongodb" label="MongoDB">
                  <template v-if="schemaList.mongodb.length > 0">
                    <ep-tag
                      v-for="(item, index) in schemaList.mongodb"
                      :key="index"
                      style="margin: 0 3px; cursor: pointer"
                      :type="schemaSearchList.indexOf(item) === -1 ? 'primary' : 'gary'"
                      @click.native="addToSearchList(item)"
                      >{{ showSchemaLabel(item) }}
                    </ep-tag>
                  </template>
                  <span v-else class="hunter-intro-item-tab-none">暂无数据</span>
                </ep-tab-item>
                <ep-tab-item name="dameng" label="Dameng">
                  <template v-if="schemaList.dameng.length > 0">
                    <ep-tag
                      v-for="(item, index) in schemaList.dameng"
                      :key="index"
                      style="margin: 0 3px; cursor: pointer"
                      :type="schemaSearchList.indexOf(item) === -1 ? 'primary' : 'gary'"
                      @click.native="addToSearchList(item)"
                      >{{ showSchemaLabel(item) }}
                    </ep-tag>
                  </template>
                  <span v-else class="hunter-intro-item-tab-none">暂无数据</span>
                </ep-tab-item>
              </ep-tabs>
            </li>
          </ul>
        </div>
      </ep-col>
      <ep-col :col="14">
        <div class="schema-tab">
          <hunter-work-schema-tab :db-type="activeSchemaTab" :schema-search-list="schemaSearchList" @close="addToSearchList"></hunter-work-schema-tab>
        </div>
      </ep-col>
    </ep-row>
  </div>
</template>

<script>
import { previousRangeDate } from '@easipass/utils'
import { getHunterMonitor } from './api'
import cookie from '@easipass/utils/cookie'
import HunterWorkSchemaTab from './hunterWorkSchemaTab'

export default {
  name: 'hunterWorkbench',
  components: { HunterWorkSchemaTab },
  mounted() {
    this.handleGetMonitor(true)
    try {
      this.schemaSearchList = JSON.parse(cookie.getCookie('schemaSearchList') || '[]')
    } catch (e) {
      this.schemaSearchList = []
      cookie.setProcessCookie('schemaSearchList', '[]')
    }
  },
  data() {
    return {
      schemaList: {
        oracle: [],
        mysql: [],
        dameng: [],
        mongodb: []
      },
      schemaSearchList: [],
      schemaListLength: '',
      hunterDateRange: previousRangeDate(7),
      activeSchemaTab: 'oracle',
      machineInfo: {
        allCount: 0,
        errCount: 0,
        extErrCount: 0,
        extRollbackCount: 0,
        extSuccCount: 0,
        notPassCount: 0,
        errMachine: []
      }
    }
  },
  methods: {
    showSchemaLabel(schema) {
      if (schema.startsWith('mysql.')) {
        return schema.replace('mysql.', '')
      } else if (schema.startsWith('mongodb.')) {
        return schema.replace('mongodb.', '')
      } else if (schema.startsWith('dameng.')) {
        return schema.replace('dameng.', '')
      } else {
        return schema
      }
    },
    addToSearchList(schema) {
      if (this.schemaSearchList.indexOf(schema) === -1) {
        this.schemaSearchList.push(schema)
        cookie.setProcessCookie('schemaSearchList', JSON.stringify(this.schemaSearchList))
      } else {
        this.schemaSearchList.splice(this.schemaSearchList.indexOf(schema), 1)
        cookie.setProcessCookie('schemaSearchList', JSON.stringify(this.schemaSearchList))
      }
    },
    handleGetMonitor(init) {
      getHunterMonitor({ dateRange: this.hunterDateRange }).then(json => {
        let { machineCheck } = json.data
        this.machineInfo = machineCheck
        if (init) {
          let resourceList = machineCheck.schemaList || []
          let schemaList = {
            oracle: [],
            mysql: [],
            mongodb: [],
            dameng: []
          }
          resourceList.forEach(schema => {
            if (schema.startsWith('mysql.')) {
              schemaList.mysql.push(schema)
            } else if (schema.startsWith('mongodb.')) {
              schemaList.mongodb.push(schema)
            } else if (schema.startsWith('dameng.')) {
              schemaList.dameng.push(schema)
            } else {
              schemaList.oracle.push(schema)
            }
          })
          this.schemaList = schemaList
        }
      })
    }
  }
}
</script>

<style lang="less">
.hunter-work-bench-block {
  height: 750px;

  .hunter-intro-data-range {
    position: absolute;
    top: 20px;
    right: 30px;

    & .ep-time-range-block {
      min-width: 220px;
      width: 220px;
    }
  }

  .schema-tab {
    height: 550px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 30px;

    .hunter-intro-title {
      font-size: 16px;
      font-weight: 700;
      line-height: 36px;
    }

    .hunter-intro-item-tab {
      overflow-y: auto;
      height: 450px;
      position: relative;
      font-size: 14px;
      line-height: 36px;

      .hunter-intro-item-tab-none {
        padding-left: 15px;
        color: #546e7a;
      }
    }

    .hunter-intro-item {
      position: relative;
      border-bottom: 1px dashed #e1e2e3;
      font-size: 14px;
      line-height: 30px;
      height: 30px;
      overflow: hidden;

      .hunter-intro-item-title {
        left: 0;
        top: 0;
        position: absolute;
        height: 30px;
        color: #455a64;
        font-weight: 700;
        width: 120px;
        text-align: right;
      }

      .hunter-intro-item-label {
        margin-left: 120px;
        padding-left: 24px;
      }

      .word-one-line {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
